<template>
    <div class="reminder-banner" :class="reminderClass">
      <el-icon><Clock /></el-icon>
      <span>距离合同到期还剩 {{ daysRemaining }} 天</span>
      <el-button type="text" @click="handleRenew">立即续约</el-button>
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  
  const props = defineProps<{
    endDate: string
  }>()
  
  const daysRemaining = computed(() => {
    const end = new Date(props.endDate)
    const now = new Date()
    return Math.ceil((end.getTime() - now.getTime()) / (1000 * 3600 * 24))
  })
  
  const reminderClass = computed(() => {
    if (daysRemaining.value <= 7) return 'urgent'
    if (daysRemaining.value <= 30) return 'warning'
    return 'normal'
  })
  
  const emit = defineEmits(['renew'])
  
  const handleRenew = () => {
    emit('renew')
  }
  </script>